<!-- 上传资源列表 -->
<template>
  <div class="container">
    <div ref="searchBox">
      <el-form ref="modelForm" :model="queryPrams">
        <SearchArea
          :listUrl="pageUrl.list"
          @ok="getListData(pageUrl.list)"
          @reset="handleReset(modelForm, {}, pageUrl.list)"
        >
          <el-col :span="8">
            <BaseInput
              label="上传用户昵称"
              v-model="queryPrams.originatorName"
              prop="originatorName"
              :clearable="true"
            >
            </BaseInput>
          </el-col>
          <el-col :span="8">
            <BaseInput
              label="文件昵称"
              v-model="queryPrams.imgName"
              prop="imgName"
              :clearable="true"
            >
            </BaseInput>
          </el-col>
          <el-col :span="8">
            <BaseSelect
              label="资源类型"
              v-model="queryPrams.imgType"
              :options="resourcesType"
              prop="imgType"
              :clearable="true"
            >
            </BaseSelect>
          </el-col>
        </SearchArea>
      </el-form>
    </div>
    <div class="list">
      <el-table
        :data="dataSourse"
        :max-height="tableHeight"
        :border="false"
        :highlight-current-row="true"
        row-key="uid"
      >
        <el-table-column type="index" align="center" label="序号" width="100" />

        <el-table-column
          prop="imgId"
          align="center"
          label="资源ID"
          width="140"
        />

        <el-table-column
          prop="imgName"
          align="center"
          label="资源名称"
          show-overflow-tooltip
        />

        <el-table-column
          prop="imgSize"
          align="center"
          label="资源大小"
          width="120"
        >
          <template #default="scope">
            <el-tooltip
              :content="`约为${(scope.row.imgSize / 1024 / 1024).toFixed(2)}M`"
              placement="top-start"
            >
              <span>{{ scope.row.imgSize }} Kib</span>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column
          prop="imgType"
          align="center"
          label="资源类型"
          width="120"
        >
          <template #default="scope">
            <span>{{ resourcesTypeMap.get(scope.row.imgType) }}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="imgSrc"
          align="center"
          label="资源访问路径"
          width="200"
          show-overflow-tooltip
        >
          <template #default="scope">
            <span>{{ baseURL + scope.row.imgSrc }}</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="originatorName"
          align="center"
          label="上传人"
          width="160"
        >
          <template #default="scope">
            <el-tooltip placement="top-start">
              <template #content>
                <div>资源关联用户</div>
                <span
                  v-for="item in scope.row.relevanceUser"
                  :key="item.originatorId"
                >
                  {{ item.originatorName }},
                </span>
              </template>
              <span>{{ scope.row.originatorName }}</span>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column
          prop="originatorTime"
          align="center"
          label="上传时间"
          width="180"
        />

        <el-table-column
          prop="imgNums"
          align="center"
          label="上传次数"
          width="100"
        />

        <el-table-column
          prop="core"
          fixed="right"
          align="center"
          label="操作"
          width="120"
          show-overflow-tooltip
        >
          <template #default="scope">
            <el-button @click="handleDel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div ref="paginationBox">
        <BasePagination
          :pageSourse="pageSourse"
          :pageSizes="[10, 20, 30, 50]"
          :queryPrams="queryPrams"
          :listUrl="pageUrl.list"
          layout="total, pager, jumper, sizes"
          @onSearch="getListData(pageUrl.list)"
        >
        </BasePagination>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="system-resource">
import * as api from "@/api/index";
import { SearchArea } from "@components/FormSearch/index";
import { BaseInput, BaseSelect } from "@components/BaseForm/index";
import { messageConfig, type FormInstance } from "element-plus";
import usePageListData from "@/publicTs/pageListData";
import { ref, onMounted } from "vue";
import { baseURL } from "@api/request";
import { ElMessage as message } from "element-plus";
let {
  pageSourse,
  dataSourse,
  queryPrams,
  handleReset,
  getListData,
  computedTableHeight,
} = usePageListData();

// form表单实例
let modelForm = ref<any>();
// 检索区元素
const searchBox: any = ref(null);

// 列表相关url
let pageUrl = {
  list: api.admin.URL_FILERESOURECE,
};

let resourcesType: Array<[number, string]> = [
  [1, "图片"],
  [2, "视频"],
  [3, "音频"],
  [4, "文件"],
  [4, "其他"],
];

let resourcesTypeMap = new Map(resourcesType);

// table渲染高度
let tableHeight = ref(600);

// 删除文件
let handleDel = (record: any) => {
  console.log(record);
  api.upload.fileDel({ imgId: record.imgId }).then((res: any) => {
    if (res.header.code === 999) {
      message.success(res.header.message || "删除成功！");
      handleReset(modelForm.value, {}, pageUrl.list);
    }
  });
};

onMounted(() => {
  handleReset(modelForm.value, {}, pageUrl.list);
  tableHeight.value = computedTableHeight(searchBox.value);
});
</script>

<style lang="less" scoped>
.container {
  padding: 0px 24px;
  box-sizing: border-box;
}
</style>
